<template>
  <div class="container box">
    <div class="data-analysis-left">
      <el-calendar v-model="calendarValue1">
        <!--选中小红点-->
        <template slot="dateCell" slot-scope="{ date, data }">
          <div>
            <div class="spandate">
              {{ data.day.split('-').slice(2).join('-') }}
            </div>
            <div v-for="(item, key) in activeday" :key="key">
              <el-badge
                v-if="data.day == item.dat"
                is-dot
                class="item"
              ></el-badge>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
    <div class="contant-right">
      <div class="operate-btn">
        <el-button
          size="mini"
          class="btn"
          type="primary"
          @click="searchBtn('2')"
          >全部已办</el-button
        >
        <el-button
          size="mini"
          class="btn"
          type="primary"
          @click="searchBtn('1')"
          >显示未办</el-button
        >
        <el-button size="mini" class="btn" type="primary" @click="addInfo"
          >新增待办</el-button
        >
      </div>
      <div class="tableBox">
        <div class="tableBoxChild">
          <el-table :data="tableData">
            <el-table-column label="序号" align="center" type="index">
            </el-table-column>
            <el-table-column prop="name" label="待办名称" align="center">
            </el-table-column>
            <el-table-column prop="content" label="待办内容" align="center">
            </el-table-column>
            <el-table-column prop="moudle" label="所属模块" align="center">
            </el-table-column>
            <el-table-column prop="createDate" label="数据日期" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
            </el-table-column>
            <el-table-column prop="status" label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="viewInfo(scope.row)"
                  >详情</el-button
                >
                <el-button size="mini" type="text" @click="editInfo(scope.row)"
                  >编辑</el-button
                >
                <el-button size="mini" type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageFn"
        >
        </el-pagination>
      </div>
      <!-- <div class="tableBox table-panel">
        <div class="tableBoxChild">
          <CommonTable
            :tableColumns="tableColumns"
            :tableData="tableData"
            :page="page"
            @handerSortChange="handerSortChange"
            @filterTable="filterTable"
          />
        </div>
        <div class="con-footer pagination" style="float: right">
          <el-pagination
            small
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="pageFn"
          >
          </el-pagination>
        </div>
      </div> -->
    </div>
    <el-dialog
      :title="title"
      :visible.sync="addShowDialog"
      :append-to-body="true"
      destroy-on-close
      width="600px"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :inline="true"
        label-width="110px"
      >
        <el-form-item label="待办名称：" prop="todoName" style="width: 600px">
          <el-input
            v-model="addForm.todoName"
            placeholder="请输入"
            :disabled="title === '查看'"
            style="min-width: 400px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="待办内容：" prop="content" style="width: 600px">
          <el-input
            type="textarea"
            v-model="addForm.content"
            :disabled="title === '查看'"
            style="min-width: 400px"
            placeholder="请输入"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="所属模块：" prop="type" style="width: 600px">
          <el-select
            v-model="addForm.type"
            placeholder="请选择"
            :disabled="title === '查看'"
            style="min-width: 100%"
          >
            <el-option
              style="min-width: 400px"
              :label="v.key"
              :value="v.value"
              v-for="(v, i) in productTypeOption"
              :key="i"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据日期：" prop="dataDate" style="width: 600px">
          <el-date-picker
            v-model="addForm.dataDate"
            :disabled="title === '查看'"
            style="min-width: 400px"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="是否加入提醒：" style="width: 600px">
          <el-radio-group v-model="addForm.resource">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import CommonTable from '@/components/CommonTable';
import { todoBacklog, updateInsert } from '@/api/customerList/index.js';
export default {
  name: 'RemindersOne',
  components: {
    Pagination,
    CommonTable,
  },
  data() {
    return {
      addForm: {},
      productTypeOption: [
        {
          key: '走访预约',
          value: '走访预约',
        },
        {
          key: '客户排名变动',
          value: '客户排名变动',
        },
        {
          key: '商机',
          value: '商机',
        },
        {
          key: '授信到期',
          value: '授信到期',
        },
      ],
      page: {
        page: 1,
        size: 10,
      },
      // tableColumns: [
      //   {
      //     column: 'name',
      //     label: '待办名称',
      //     align: 'left',
      //     overflow: true, // 超出长度
      //     show: true, // 是否显示
      //     width: 120,
      //     sortable: false, // true, false, 'custom'(远程handerSortChange)
      //     headerFilter: true,
      //     filterType: 'input', // select,input,date,daterange,空
      //     filterValue: 'customerNm',
      //   },
      //   {
      //     column: 'content',
      //     label: '待办内容',
      //     align: 'left',
      //     overflow: true, // 超出长度
      //     show: true, // 是否显示
      //     width: 100,
      //     sortable: false,
      //     headerFilter: false,
      //     // filterType: "input",
      //     // filterValue: "text",
      //   },
      //   {
      //     column: 'moudle',
      //     label: '所属模块',
      //     align: 'left',
      //     overflow: true, // 超出长度
      //     show: true, // 是否显示
      //     width: 100,
      //     sortable: false,
      //     headerFilter: true,
      //     filterType: 'select', // select,input,date,daterange,空
      //     filterValue: [],
      //     headerFilterList: [
      //       {
      //         text: '1',
      //         value: '模块1',
      //         id: '1',
      //       },
      //       {
      //         text: '2',
      //         value: '模块2',
      //         id: '2',
      //       },
      //     ],
      //   },
      //   {
      //     column: 'createDate',
      //     label: '数据日期',
      //     align: 'left',
      //     overflow: true, // 超出长度
      //     show: true, // 是否显示
      //     width: 140,
      //     sortable: false,
      //     headerFilter: true,
      //     filterType: 'date',
      //     filterValue: '',
      //   },
      //   {
      //     column: 'status',
      //     label: '状态',
      //     align: 'left',
      //     overflow: true, // 超出长度
      //     show: true, // 是否显示
      //     width: 140,
      //     sortable: false,
      //     headerFilter: true,
      //     filterType: 'select', // select,input,date,daterange,空
      //     filterValue: [],
      //     headerFilterList: [
      //       {
      //         text: '1',
      //         value: '已处理',
      //         id: '1',
      //       },
      //       {
      //         text: '2',
      //         value: '未处理',
      //         id: '2',
      //       },
      //     ],
      //   },
      //   {
      //     column: 'operate',
      //     label: '操作',
      //     align: 'left',
      //     width: 120,
      //     show: true,
      //     fixed: 'right',
      //     btns: [
      //       {
      //         // code: "btn-delete-dataTable",
      //         label: '详情',
      //         // fun: "deleteInfo",
      //       },
      //       {
      //         // code: "btn-delete-dataTable",
      //         label: '编辑',
      //         fun: eidtInfo,
      //       },
      //       {
      //         // code: "btn-delete-dataTable",
      //         label: '删除',
      //         // fun: "deleteInfo",
      //       },
      //     ],
      //   },
      //   // {
      //   //   column: "status",
      //   //   label: "消息状态",
      //   //   align: "left",
      //   //   overflow: true, // 超出长度
      //   //   show: true, // 是否显示
      //   //   sortable: false,
      //   //   // width: 120,
      //   //   headerFilter: true,
      //   //   filterType: "select", // select,input,date,daterange,空
      //   //   filterValue: [],
      //   //   headerFilterList: [
      //   //     {
      //   //       text: "1",
      //   //       value: "未读",
      //   //       id: "1",
      //   //     },
      //   //     {
      //   //       text: "2",
      //   //       value: "已读",
      //   //       id: "2",
      //   //     }
      //   //   ],
      //   // },
      // ],
      tableData: [],
      // 日历
      calendarValue1: new Date(),
      activeday: [
        // 日历组件选中的日期，小红点，时间格式必须为yyyy-MM-dd，比如3月5号要写成03-05而不是3-5
        { dat: '2023-08-21' },
        { dat: '2023-08-15' },
        { dat: '2023-08-05' },
      ],
      total: 0,
      count: '',
      title: '',
      addShowDialog: false,
    };
  },

  mounted() {
    this.searchBtn('');
  },

  methods: {
    async searchBtn(val) {
      if (val === '1') {
        const params = {
          type: '',
          todoName: '',
          dataDate: '',
          status: val,
          pageNum: 1,
          pageSize: 10,
        };
        const res = await todoBacklog(params);
        this.tableData = res.data.records;
      }
      if (val === '2') {
        const params = {
          type: '',
          todoName: '',
          dataDate: '',
          status: val,
          pageNum: 1,
          pageSize: 10,
        };
        const res = await todoBacklog(params);
        this.tableData = res.data.records;
      }
      if (val === '') {
        const params = {
          type: '',
          todoName: '',
          dataDate: '',
          status: '',
          pageNum: 1,
          pageSize: 10,
        };
        const res = await todoBacklog(params);
        this.tableData = res.data.records;
      }
    },
    editInfo(row) {
      this.addForm = {};
      this.title = '编辑';
      this.addShowDialog = true;
      this.addForm = row;
      console.log(row);
    },
    viewInfo(row) {
      this.addForm = {};
      this.title = '查看';
      this.addShowDialog = true;
      this.addForm = JSON.parse(JSON.stringify(row));
    },
    // 远程排序
    handerSortChange({ column, prop, order }) {
      console.log('sortChange 点击排序', column, prop, order);
    },
    // 远程搜索
    filterTable(obj) {
      console.log('filterTable 点击筛选', obj);
    },
    pageFn(currentPage) {
      // queryBondProbabilityDetail({
      //   bondId: this.bondInfo.bondId,
      //   page: currentPage,
      //   pn: 10,
      // }).then((res) => {
      //   this.tableData = res.data.result;
      //   this.total = Number(res.data.totalResults);
      // });
    },
    addInfo() {
      (this.title = '新增'), (this.addShowDialog = true);
    },
    async dialogBtn() {
      if (this.title === '新增') {
        await updateInsert(this.addForm);
        this.addShowDialog = true;
      }
      if (this.title === '编辑') {
        await updateInsert(this.addForm);
        this.addShowDialog = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #262d47;
}

.operate-btn {
  padding: 10px 10px 0 10px;
}

.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}

.tableBox {
  background-color: #262d47;
  flex: 1;
  padding: 15px 10px;
}

.tableBoxChild {
  min-height: 500px;
}

.el-pagination {
  text-align: right;
}

.container {
  display: flex;

  .data-analysis-left {
    width: 500px;
    margin-right: 20px;
  }

  .contant-right {
    width: 100%;
  }
}

::v-deep {
  .el-form .el-form-item .el-form-item__content .el-input__inner {
    min-width: 400px;
  }
}
</style>
